<script setup>
import { computed, nextTick, reactive, ref, toRefs, watch } from 'vue';
import PaginationToolbar from './PaginationToolbar.vue';



//TODO 设计复杂，逻辑较乱
const props = defineProps({
    data: Array,
    paginationStyleType: Number, // 0 => 普通， 1 => 瀑布流，下拉翻页
    direction: Number, //0 => row, 1 => column
    limit: Number,
    maxPage: Number,
    loadPage: Function,
    onPageLoaded: Function,
    loading: Boolean,
    nextPagePendingMark: Number,    //下一页
    refreshAllPendingMark: Number,  //刷新全部
    refreshPagePendingMark: Number, //刷新当前页
    useMaxPage: Boolean,
})

//数据优先级： props.data > dataFromLoad
const { data: dataInProps, limit, maxPage,
    paginationStyleType, nextPagePendingMark,
    refreshAllPendingMark, refreshPagePendingMark,
    useMaxPage } = toRefs(props)
const dataFromLoad = reactive([])

const currentPage = ref(1)
const currentPageMatchLimit = ref(null)
const setCurrentPage = (value) => currentPage.value = value
const setCurrentPageMatchLimit = (value) => currentPageMatchLimit.value = value
const totalPageFromLoad = ref(0)

const getMaxPage = computed(() => {
    if(useMaxPage.value) {
        return maxPage.value || totalPageFromLoad.value
    }
    return totalPageFromLoad.value || maxPage.value
})

const isNormalStyleType = computed(() => (paginationStyleType.value == 0))

const onPageChanged = async ({ offset, limit, page }) => {
    const prevPage = currentPage.value
    setCurrentPage(page)
    
    const { loadPage, onPageLoaded, } = props
    if (!loadPage) return

    const result = await loadPage({ offset, limit, page, dataInProps: dataInProps.value })
    if (!result) return

    if (isNormalStyleType.value || page == 1 || offset == 0) dataFromLoad.length = 0

    const { data, total } = result

    if (data && data.length > 0 && (typeof data[0] == 'object')) {
        setCurrentPageMatchLimit(data.length === limit)
        dataFromLoad.push(...data)
    }

    if (total >= 0) totalPageFromLoad.value = total
    if (onPageLoaded) onPageLoaded({ offset, limit, page, data, total, prevPage })
}

const paginationToolbarRef = ref(null)
const nextPage = (event) => {
    if (!paginationToolbarRef.value || isNormalStyleType.value) return

    paginationToolbarRef.value.nextPage(event)
}

const refreshAll = () => {
    dataFromLoad.length = 0
    if (dataInProps.value) return
    if (!paginationToolbarRef.value) return onPageChanged({ offset: 0, limit: limit.value, page: 1})
    paginationToolbarRef.value.goToPage(1)
}

const refreshPage = () => {
    dataFromLoad.length = 0
    if (dataInProps.value || !paginationToolbarRef.value) return
    paginationToolbarRef.value.refreshPage()
}

const isLastPageContent = computed(() => {
    if (!isNormalStyleType.value) return false
    if (!currentPageMatchLimit.value) return true
    return currentPage == maxPage.value
})

const isToolbarEnable = computed(() => {
    if (!isNormalStyleType.value) return false
    return getMaxPage.value > 1
})

const computedData = computed(() => {
    const data = dataInProps.value
    return (data && data.length > 0) ? data : dataFromLoad
})


/* 生命周期、监听 */
watch(nextPagePendingMark, nextPage, { immediate: true })
watch(refreshPagePendingMark, refreshPage, { immediate: true })
watch(refreshAllPendingMark, () => { nextTick(refreshAll) }, { immediate: true })
watch(paginationStyleType, refreshAll, { immediate: true })
</script>

<template>
    <div class="pagination-tiles">
        <div class="pag-content" :class="{ 'last-pag-content': isLastPageContent, 'flex-column': (direction == 1) }"
            v-show="!loading && computedData.length > 0">
            <div class="pag-tile" v-for="(item, index) in computedData">
                <slot :item="item" :index="index"></slot>
            </div>
            <div>
                <slot name="loading1"></slot>
            </div>
        </div>
        <div>
            <slot name="loading2"></slot>
        </div>
        <div class="empty-data" v-show="!loading && computedData.length < 1 && false">
            <div class="icon">
                <svg width="32" height="32" v-show="false" viewBox="0 0 921.17 508.33" xmlns="http://www.w3.org/2000/svg">
                    <g id="Layer_2" data-name="Layer 2">
                        <g id="Layer_1-2" data-name="Layer 1">
                            <path
                                d="M459.89,508.32A1362.31,1362.31,0,0,1,282,497.05c-56.37-7.38-112.08-17.92-165.9-36.78-30-10.49-59-23-83.85-43.33-14.85-12.11-27.74-26.2-30.94-45.77C-.59,359.85-.1,347.93.81,336.41,7.58,251.1,35,172.67,80.4,100.36c11.37-18.1,28-30.15,46.33-40.06C163,40.72,202.19,29.83,242.15,21.2c41.73-9,84-14.46,126.53-17.71A1196.11,1196.11,0,0,1,525,1.77a1048.48,1048.48,0,0,1,122.6,13.44c42.22,7.33,83.82,17.07,123.39,34C794,59,816.1,70.45,832.46,90c6.89,8.23,12.45,17.68,17.9,27C883,172.71,905,232.41,915.09,296.21a577.5,577.5,0,0,1,6,61.59c.88,17.62-6.92,32.62-18.48,45.63-16.15,18.17-36.52,30.41-58.17,40.65-40.88,19.34-84.19,31.1-128.31,40.13C631.61,501.52,546,508.05,459.89,508.32ZM82,157c-.85,1.6-1.5,2.75-2.09,3.93A512.88,512.88,0,0,0,36,290.59c-1.42,7.29,0,12.2,5,17.31C54.75,322,71.38,331.71,88.88,340c34.15,16.23,70.21,26.78,107,35.13,72.38,16.45,145.85,23.92,219.92,26.08,99.4,2.9,198.16-2.8,295.74-23.12C753,369.49,793.64,358.19,832.06,340c18.43-8.75,36-18.94,49.77-34.48a12.94,12.94,0,0,0,3.36-12.19,497.5,497.5,0,0,0-26.91-92.86c-5.89-14.56-12.51-28.83-19.19-44.14-14.77,20.89-34.26,34-56,43.38a586.61,586.61,0,0,1-65.43,24.17c-43.41,12.87-88,20.45-133.08,24.23-36.31,3-72.73,5.69-109.14,6.46A1066.57,1066.57,0,0,1,283,241.23c-41.59-6.69-82.55-15.86-121.87-31.23C131.13,198.29,102.34,184.51,82,157ZM466.34,29.13c-61.64.06-116.95,3.63-171.87,12.21-44.79,7-89,16.6-131.14,33.86-17.77,7.27-35.29,15.37-49,29.2-14.74,14.84-17.69,28.3-.22,45.67a86.21,86.21,0,0,0,12.4,10c19.74,13.42,41.81,21.74,64.22,29.44,7.1,2.44,12.48,2.3,19.23-2,24.08-15.47,51.22-23.67,78.8-30.3,44.86-10.79,90.49-15.72,136.51-17.4,68.34-2.49,136.2,1.21,203.06,16.52C659.56,163.48,690,173,717,191.16a6.65,6.65,0,0,0,5,.76c24.05-7.45,47.65-16,69.05-29.64,8.89-5.66,17.24-12.06,22.95-21.18s6.38-18.6-.41-27.47c-4-5.24-8.13-10.89-13.46-14.52-10.66-7.29-21.74-14.3-33.44-19.71-37.42-17.28-77.24-26.79-117.57-34.2C586.73,33.73,523.67,29.29,466.34,29.13ZM29.79,337.89c-.24,5.1-.15,9.41-.71,13.64-1.92,14.54,4,25.92,13.89,35.84,10.72,10.74,23.4,18.69,36.74,25.6,31.21,16.19,64.47,26.74,98.42,35.3C244.42,465,312,473.19,380.07,477a1427.78,1427.78,0,0,0,198.27-2.64c45.35-3.79,90.37-9.73,134.89-19.23,40.26-8.59,79.86-19.41,117.31-36.95,18-8.43,35-18.38,49.22-32.73,13.49-13.62,13.18-29.86,10.84-46.42-11.21,7.09-22,14.69-33.44,21-35.55,19.59-74,31.55-113.18,41.12C670.55,419.07,595.79,427,520.44,430a1470.54,1470.54,0,0,1-192.25-4.7c-48.3-4.4-96.27-11-143.47-22.32C130,389.89,76.4,373.65,29.79,337.89ZM243.27,201.51l.45,2.72c144.48,28.28,288.94,28.33,433.48-.85a15.47,15.47,0,0,0-5.72-3.33c-13.27-4.33-26.39-9.3-39.89-12.74-53.57-13.64-108.25-18.56-163.37-19-60.32-.51-120.18,4.17-178.85,19C273.8,191.25,258.63,196.73,243.27,201.51Z" />
                        </g>
                    </g>
                </svg>
                <svg width="56" height="56" viewBox="0 0 807.05 1024" xmlns="http://www.w3.org/2000/svg">
                    <g id="Layer_2" data-name="Layer 2">
                        <g id="Layer_1-2" data-name="Layer 1">
                            <path
                                d="M490,0c6.87,1.39,11.68,5.94,16.47,10.61,26.92,26.29,41.88,58.8,49.52,95.1a264.7,264.7,0,0,1,5.14,61.6,37.47,37.47,0,0,0,1.45,11.25c9.59,33.09,18.52,66.29,24.77,100.24,11.19,60.81-.81,116.09-37.48,165.92q-11.83,16.09-24.23,31.78a7.3,7.3,0,0,0-1.51,7.21,683.25,683.25,0,0,1,18.26,88.42c3.79,28.32,5.32,56.7,2.92,85.23a11.57,11.57,0,0,0,.87,5.75c15.36,32,19.58,66.13,19.37,101.11,0,2.82,0,5.64,0,8.95a18.37,18.37,0,0,0,3.11-1.11c37.91-22.32,63.62-53.74,71.76-97.79,5.86-31.73,1.81-62.37-12.46-91.42-5.74-11.7-11.42-23.37-12.9-36.49-3.66-32.34,11-59.85,39.86-75.24,53.93-28.76,117.49-4.7,141,53.41a154.5,154.5,0,0,1,11,56c1.52,92.13-35.35,167.28-102.33,228.65-34.26,31.4-73.65,54.16-118.85,66.13-8.48,2.24-17.14,3.78-26.21,5.75,2,5.57,4.17,10.92,6,16.37,5.92,17.64,10.2,35.54,7.75,54.38-3.23,24.88-17.37,41.57-39.55,52a129.9,129.9,0,0,1-51.73,12c-24.44.67-48.92-.21-73.38-.42-1,0-2.15-.33-3,0-11.62,5.56-24.09,7.41-36.72,8.57h-3a41.57,41.57,0,0,0-4.4-.72c-19.27-1.11-36.69-7.64-52.78-18-4.46-2.88-8.69-6.12-13.22-9.33-1.45,1.08-2.91,2.16-4.34,3.25-14.38,10.93-30.19,18.86-48,22.34-6,1.18-12.17,1.67-18.26,2.48h-3a5.47,5.47,0,0,0-1.41-.48,90.21,90.21,0,0,1-33.88-7.66,10.55,10.55,0,0,0-4.37-.43c-20.65.46-41.3,1.64-61.93,1.25-19.68-.37-39.12-3.39-57.68-10.63-31.84-12.42-47.89-38.14-45.07-72C19.59,910.92,28,889.82,37.25,868.9a15.85,15.85,0,0,0,1-9.41c-8.79-37-13.6-74.36-12.15-112.4,1.05-27.49,5.66-54.32,17.19-79.53,2.26-4.94,2.7-9.63,2.57-14.88-.36-15.31-.85-30.67-.12-45.94,1.74-36.39,8.73-72,17.37-107.31,1.61-6.6,5.44-13.71,4.13-19.69s-7.81-10.85-12-16.25c-18.45-24-35-49.07-45.18-77.85-12.67-35.77-11.91-72.24-5.63-109,5.78-33.86,15.24-66.8,24.84-99.71a21.29,21.29,0,0,0,1.05-6.82A256,256,0,0,1,35,107.48c7.43-37.06,22.55-70.22,50-97C89.67,5.94,94.41,1.59,101,0h2c14.14,4.07,26.54,11.43,38,20.44,25.69,20.27,43.55,46.49,57.2,75.86,3.4,7.31,3.36,7.33,11.33,6.37.5-.06,1-.19,1.48-.22,29.43-1.6,58.85-4.46,88.27-4.43,27.92,0,55.85,2.9,83.75,4.93,5.31.39,7.5-1.11,10.05-5.79C401.29,82,409.4,66.57,419.46,52.62,436.91,28.44,459.06,9.58,488,0ZM105.39,36.51c-3.43,4.09-6.87,7.72-9.8,11.73C69.08,84.42,62.05,125.78,63.35,169.4a42.42,42.42,0,0,1-1.28,12.73C51.33,219.72,39.67,257.07,34.47,296c-4.75,35.62-.6,69.7,16.63,101.74C63.64,421.08,79.54,442,96.63,462.06c5.6,6.56,7.2,13.11,4.82,21.59-11.3,40.29-20.2,81.08-22.91,123-2.16,33.5-.86,66.9,10.6,98.69,8.71,24.19,19.83,47.54,30.35,71,9.27,20.74,16.78,41.88,20.92,64.35,4.52,24.52,9.76,48.95,15.87,73.12,5,19.88,12.47,39,25.16,55.6q17.81,23.28,47.1,20.82c21.13-1.81,38.2-11.88,53-26.4,10.12-10,18.36-10.05,28.25-.1,10.85,10.93,23.41,19.18,38.22,23.76,27.15,8.39,49.91.38,65.65-23.23a119,119,0,0,0,7.44-13c10.67-21.48,16.87-44.46,21.83-67.76,4.19-19.69,7.16-39.64,11.55-59.28,5.53-24.71,17-47.18,27.95-69.81,10.2-21.18,19.38-42.71,24.7-65.73,9.8-42.51,7.85-85.13.18-127.53-4.79-26.49-11.51-52.64-17.7-78.86-1.72-7.28-.84-13.36,4.18-19,4.11-4.6,7.92-9.46,11.75-14.29,15.67-19.73,30.22-40.17,40.53-63.36C561.2,351.56,562,316,554.22,280.41c-7.1-32.64-16.44-64.79-24.72-97.17A52,52,0,0,1,527.81,173c-.73-15.45-.35-31-2-46.35-2.69-24.39-10-47.56-23.25-68.44-4.85-7.65-10.74-14.63-16.19-22-3.6,2.16-6.26,3.56-8.7,5.27a125.52,125.52,0,0,0-10.38,7.8C443.45,69.86,428.13,96.1,417,125.1c-3.72,9.72-9.77,13.26-20.13,12.26-19.73-1.9-39.47-3.73-59.23-5.25-47.74-3.66-95.23.06-142.66,5.16-11.08,1.19-17-2.23-20.83-12.6a207,207,0,0,0-24.71-47.2C137.84,60.93,124.08,46.66,105.39,36.51ZM61.45,727.64a16.32,16.32,0,0,0-1.05,2.45c-.19,1.32-.31,2.65-.43,4-3.6,41.46,1.4,82.13,11.81,122.2,2,7.91,1.52,14.75-2.14,22.06-8.15,16.24-14.89,33.06-18.21,51.07-4.64,25.19,3.62,39.65,28.11,47.26a146.94,146.94,0,0,0,28.79,5.79c13.81,1.39,27.75,1.5,42.63,2.2-3.48-6.16-6.42-10.94-9-15.93-15-29.34-22.57-61-29-93.07-3.52-17.61-5-36-11.17-52.62C89.94,791,75.32,760,61.45,727.64ZM440.83,983.81c9.47,0,18.4.38,27.3-.08,16.82-.85,33.56-2.57,49.36-9.05,18-7.41,25-19,23.33-38.36a87.68,87.68,0,0,0-1.4-9.38c-3.61-18.1-10.86-34.89-18.9-51.36a22.38,22.38,0,0,1-1.58-16.4c8.29-31.35,13.19-63.22,13.53-95.67.12-11.68-.78-23.36-1.21-35-5.7,10.27-10.17,20.57-14.67,30.87-9,20.71-19.71,40.89-26.67,62.28-6.39,19.63-8.7,40.58-12.95,60.92-6.26,30-13.8,59.66-28.06,87.1C446.48,974.31,443.71,978.79,440.83,983.81Z" />
                            <path
                                d="M183.26,368.33c-24.89-.46-50.27-6.75-71-25.49-23-20.85-28.89-47.08-19.74-76.06s29.8-46.69,60.2-50.72c35.33-4.68,61.9,11.39,82.63,38.52,17.17,22.49,25.59,48.74,30.49,76.22,1.41,7.92-2,13.88-8.9,18C235,362,211.17,368.25,183.26,368.33ZM159.8,248.4c-23.67,2.58-38.47,19.88-38,43.81.37,18.31,19.15,37.54,38,38.79Z" />
                            <path
                                d="M401.6,368.3a132.67,132.67,0,0,1-66.4-19.11c-8.65-5.17-11.14-10.5-9.29-20.42,5.64-30.4,15.77-58.89,36.75-82.38,16.79-18.8,37.51-30.39,63.12-31.22,35.45-1.16,65.41,21.31,74.22,55,9.15,35-5.51,67.69-38.07,84.83C444.89,364,426.78,368.2,401.6,368.3Zm29.93-37.15c24.69-3.62,40.65-24.4,37.49-48-2.56-19.1-21.21-36.13-37.49-34.05Z" />
                            <path
                                d="M295.26,772.07c8-13.69,15.46-27.67,24.12-40.84,19.67-29.91,44.54-54.69,75.25-73.36,11.08-6.74,23.62-1.54,26,10.6,1.33,6.83-1.86,13.23-9.27,17.8-24.18,14.93-44.09,34.34-60.49,57.43a261.75,261.75,0,0,0-37.34,75.81,32.84,32.84,0,0,0-1.34,9.3c-.12,20.83,0,41.66-.07,62.49,0,11-6.88,18.6-16.63,18.44-9.54-.16-16.34-7.7-16.36-18.34,0-20.5.1-41-.1-61.49a42.14,42.14,0,0,0-2-12.68c-15.2-46-39.43-86.15-77.44-117.07A237.15,237.15,0,0,0,180,686.34c-9.3-6.12-12.18-15.53-6.95-23.87s14.91-10,24.5-4.1C236,682.11,264.53,714.92,286,754.22,289.3,760.2,292.3,766.33,295.26,772.07Z" />
                            <path
                                d="M295.48,437.43a56.06,56.06,0,0,1-31.85,18.69c-14.18,3-26.72-.52-38.08-9-9-6.75-15.32-15.69-19.65-26a16.33,16.33,0,0,1,8.1-21.51c8.18-3.79,17.16-.59,21.76,7.57,2.11,3.75,4.11,7.72,7,10.88,7.46,8.31,17.6,8.3,25.4.31,5.94-6.08,8.76-13.69,9.85-21.93.17-1.28-1.1-3.31-2.29-4.11-2.75-1.84-5.94-3-8.82-4.66a16.4,16.4,0,0,1-6.59-22c4-7.7,13.8-11.77,21.31-7.12,9.82,6.07,18.15,6.6,28.08.11,7.4-4.85,17.27-.8,21.35,6.87a16.27,16.27,0,0,1-5.91,21.82A33.05,33.05,0,0,1,318,391c-4.95,1.62-6,4.76-4,9.11,2.65,5.85,4.68,12.28,8.54,17.22,7.42,9.5,18.7,9.28,26.6.19a52,52,0,0,0,6.11-9.65c4.73-8.81,13.84-12.2,22.3-8.12s11.64,13.39,7.44,22.47c-7.78,16.81-19.37,29.93-38.19,33.72-19.25,3.87-36.32-1-49.48-16.51C296.8,438.78,296.22,438.22,295.48,437.43Z" />
                            <path
                                d="M109.12,61.29c8.26.05,14.71,5.91,16.25,14.73,2.88,16.52,5.66,33.07,8.74,49.56.87,4.72,2.67,9.26,3.92,13.91,2.44,9-2,17.7-10.4,20.46-8.84,2.9-18.19-1.14-20.71-10.42-4.52-16.65-8.2-33.54-11.81-50.42a139.36,139.36,0,0,1-2.4-20.3A16.28,16.28,0,0,1,109.12,61.29Z" />
                            <path
                                d="M498.85,78.81c-2.34,23.9-6.56,47.44-14,70.29-3.06,9.38-12.12,13.81-21.07,10.86-8.57-2.82-13.18-11.76-10.28-21,6.46-20.56,10.26-41.61,12.55-63a16.43,16.43,0,0,1,17.23-14.68A16.74,16.74,0,0,1,498.85,78.81Z" />
                        </g>
                    </g>
                </svg>
            </div>
            <div class="text">
                空空如也，喵喵喵 ~
            </div>
        </div>
        <PaginationToolbar ref="paginationToolbarRef" :disabled="!isToolbarEnable" :limit="limit" :maxPage="getMaxPage"
            :onPageChanged="onPageChanged">
        </PaginationToolbar>
    </div>
</template>

<style scoped>
.pagination-tiles {
    display: flex;
    flex-direction: column;
    --content-min-height: 430px;
}

.pagination-tiles .spacing {
    margin-left: 20px;
}

.pagination-tiles .pag-content {
    display: flex;
    flex-wrap: wrap !important;
    flex-direction: row;
    flex: 1;
}

.pagination-tiles .flex-column {
    flex-direction: column;
}

.pagination-tiles .flex-column .pag-tile {
    width: 100%;
}

.pagination-tiles .last-pag-content {
    min-height: var(--content-min-height);
}

.pagination-tiles .empty-data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 66px;
    font-size: var(--content-text-module-title3-size);
    color: var(--content-subtitle-text-color);
}

.pagination-tiles .empty-data svg {
    fill: var(--content-subtitle-text-color);
    margin-right: 10px;
}

.pagination-tiles .empty-data .text {
    margin-top: 10px;
}
</style>